<template>
  <view class="table" v-if="tableData.length">
    <view class="tableHd tableCon odd">
      <view class="item item1">日期</view>
      <view class="item item2">数量</view>
    </view>

    <scroll-view
      class="tableBox"
      scroll-y="true"
      scroll-anchoring
      scroll-with-animation
    >
      <view
        class="tableBd tableCon"
        :class="[index % 2 === 0 ? 'even' : 'odd']"
        v-for="(item, index) of tableData"
        :key="index"
      >
        <view class="item item1">{{ item.date }}</view>
        <view class="item item2">{{ item.value || 0 }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    tableData: {
      type: [Array],
      default() {
        return [];
      },
    },

    value: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="less" scoped>
.tableCon {
  display: flex;

  &.even {
    .item {
      background: rgba(255, 232, 225, 0.3);
    }
  }

  .item {
    overflow: hidden;
    padding: 0 5rpx;
    width: 50%;
    height: 60rpx;
    line-height: 60rpx;
    color: #2e2d2d;
    background: rgba(255, 232, 225, 1);
    text-align: center;
  }
}

.tableBd {
  font-size: 22rpx;
}

.tableBox {
  max-height: 600rpx;
  overflow-y: auto;
}
</style>
